<template>
    <!-- 普通支付订单 -->
    <div class="cashier-list">
        <!-- 导航 -->
        <tz-breadcrumb :title='["商家", "员工管理"]' :pathArr='[{"name": "商家"},{"name": "员工管理", "url": "/cashier-list"}]'></tz-breadcrumb>
        <!-- 搜索表单 -->
        <form class="form" autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com">
            <!-- 收银员 -->
            <div class="form-item">
                <el-input class="form-input" clearable v-model="nickname" size="medium" placeholder="收银员名称"></el-input>
            </div>
            <!-- 登录帐号 -->
            <div class="form-item">
                <label for="">登录帐号</label>
                <el-input class="form-input" clearable v-model="mobile" size="medium"></el-input>
            </div>
            <!-- 所属商户 -->
            <div class="form-item">
              <el-select  v-model="store_code" placeholder="选择商户">
                <el-option value="" label="选择 全部商户"></el-option>
                <el-option v-for="item in store_code_list" :key="item.id" :label="item.store_name" :value="item.store_code"> </el-option>
              </el-select>
            </div>
            <el-button type="primary" native-type='submit'>查询</el-button>
        </form>
        <!-- tab展开行，隐式数据 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>员工列表</span>
             <el-button style="float: right; padding: 3px 0" type="text"><tz-a title="添加员工" url="/addcashier" :params='{store_code:store_code}'></tz-a></el-button>
          </div>
          <el-table :data="tableData" v-loading="loading" style="width: 100%;padding-bottom: 30px;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="店铺名称:">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="收银员账号:">
                  <span>{{ props.row.rate }}</span>
                </el-form-item>
                <el-form-item label="费率:">
                  <span>{{ props.row.rate }}</span>
                </el-form-item>
                <el-form-item label="手续费:">
                  <span>{{ props.row.commission }}</span>
                </el-form-item>
                <!-- 操作 -->
                <el-form-item label="操作:">
                  <el-button type="warning" plain size="mini">退款</el-button>
                  <el-button type="success" plain size="mini">结算</el-button>
                  <el-button type="danger" plain size="mini">撤销</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <!-- 显式数据 -->
          <el-table-column label="编码" prop="" width="100">
            <template slot-scope="scope">
              {{scope.row.id ? scope.row.id : '--'}}
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="">
            <template slot-scope="scope">
              {{scope.row.nickname ? scope.row.nickname : '--'}}
            </template>
          </el-table-column>
          <el-table-column label="登录帐号" prop="">
            <template slot-scope="scope">
              {{scope.row.mobile ? scope.row.mobile : '--'}}
            </template>
          </el-table-column>
          <el-table-column label="所属商户" prop="payType">
            <template slot-scope="scope">
              {{scope.row.store_name ? scope.row.store_name : '--'}}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="">
            <template slot-scope="scope">
              {{scope.row.created_at ? scope.row.created_at : '--'}}
            </template>
          </el-table-column>
          <el-table-column label="管理员" prop="">
            <template slot-scope="scope">
              {{scope.row.is_admin ? scope.row.is_admin : '--'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="">
            <template slot-scope="scope">
              <el-button type="primary" plain size="small" @click="detailsPages(scope.row.id,scope.row.store_code)">详情</el-button>
              <el-button type="primary" plain size="small" @click="deleteStaff(scope.row.id,scope.row.store_code)">删除</el-button>
            </template></el-table-column>
        </el-table>
        </el-card>
        
        <el-pagination v-if="total > pageNum" class="text-center pager" @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
import tzA from './../../components/tz-a/tz-a.vue';
export default {
  mounted: function () {
    this.getstorelist();
    this.requestData();
    this.onSubmit();
  },
  data: function () {
    return {
      // 收银员姓名
      nickname: '',
      // 所属商户
      store_code: this.$route.query.store_code ? this.$route.query.store_code : '',
      // 商户列表
      store_code_list: [],
      // 收银员帐号
      mobile: '',
      // 支付方式
      payTypeOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'alipay',
          label: '支付宝支付'
        },
        {
          value: 'weixin',
          label: '微信支付'
        },
        {
          value: 'back',
          label: '银行卡支付'
        }
      ],
      payType: 'all',
      // 交易状态
      orderStatusOptions: [
        {
          value: 'all',
          label: '全部'
        },
        {
          value: 'paySuccess',
          label: '支付成功'
        },
        {
          value: 'refundSuccess',
          label: '退款成功'
        }
      ],
      orderStatus: 'all',
      // 收银员列表数据
      tableData: [],
      // 每页数量
      pageNum: 10,
      // 当前页
      page: 1,
      total: 0,
      loading: false
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb,
    'tz-a': tzA
  },
  methods: {
    // 提交搜索
    onSubmit: function () {
      let that = this;
      that.page = 1;
      that.requestData();
    },
    formatter (row, column) {
      return row.address;
    },
    handleCurrentChange (val) {
      this.page = val;
      this.requestData();
    },
    filterTag (value, row) {
      return row.tag === value;
    },
    filterHandler (value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    requestData () {
      let that = this;
      that.loading = true;
      http.get(api.cashierList, {
        token: localStorage.getItem('token'),
        mobile: that.mobile,
        nickname: that.nickname,
        store_code: that.store_code,
        pagesize: that.pageNum,
        page: that.page
      }, response => {
        console.log(response);
        that.tableData = response.data[0].result.data;
        that.total = response.data[0].result.total;
        that.loading = false;
      }, err => {
        console.log(err);
        console.log(11);
        that.loading = false;
      });
    },
    // 记录详情
    detailsPages (id, id2) {
      this.$router.push({
        path: '/cashierdetails',
        query: {
          cashier_id: id,
          store_code: id2
        }
      });
    },
    deleteStaff (id, storeCode) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.post(api.deletecashier, {
          token: localStorage.getItem('token'),
          store_code: storeCode,
          cashier_id: id
        }, response => {
          console.log(response.data.result);
          if (response.code === '10001') {
            this.$message.success('删除成功');
            this.requestData();
            this.onSubmit();
          } else {
            console.log(response.msg);
          }
        }, () => {
          console.log('网络错误');
        });
      }).catch(() => {
      });
    },
    getstorelist () {
      let that = this;
      http.get(api.merchantList, {
        token: localStorage.getItem('token')
      }, response => {
        console.log(response.data.result);
        if (response.code === '10001') {
          that.store_code_list = response.data[0].res.data;
        }
      }, () => {
        console.log('网络错误');
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem
  margin-top: 15px
  margin-bottom: 12px
  box-sizing: border-box
  background: #fff
  box-shadow: 1px 1px 1px #999
  .form-item
    display: inline-block
    margin-right: 35px
    label
      margin-right: 4rem
      font-size: 14px
      color: #333
    .form-input
      max-width: 15rem
  .line
    height: 4.5rem
.demo-table-expand
  font-size: 0
  label
    width: 90px
    color: #99a9bf
  .el-form-item 
    margin-right: 0
    margin-bottom: 0
    width: 50%
.pager
  padding: 0
</style>
